<template>
  <div class="cities">
    <nav-bar>
      <p slot="left" @click="goBack">
        <span class="iconfont icon-fork"></span>
      </p>
      <p slot="center">当前城市</p>
    </nav-bar>
    <head-input
      label="输入城市名或拼音"
      class="input-header"
      auto
      v-model="inputValue"
      @click="cancelShow"
    ></head-input>
    <div class="scroll-content">
      <city-filter-list v-show="isCitiesListShow" :passMusterCities="passMusterCities" @getCityId="getCityId" />
      <div v-show="!isCitiesListShow">
        <GPS />
        <hot-cities :hotCities="hotCities" @getCityId="getCityId" />
        <van-index-bar :index-list="indexList" :sticky="false" highlight-color="#000" @select="showIndex">
          <div v-for="(data, i) in citiesData" :key="i">
            <van-index-anchor :index="data.index" />
            <van-cell :title="item.name" v-for="item in data.list" :key="item.cityId" @click="getCityId(item)" />
          </div>
        </van-index-bar>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex'
import { allCity } from '@/network/cities'
import GPS from './children/GPS.vue'
import HotCities from './children/HotCities.vue'
import CityFilterList from './children/CityFilterList.vue'
import Scroll from '../../components/common/scroll/Scroll.vue'

export default {
  components: { GPS, HotCities, CityFilterList, Scroll },
  name: 'Citys',
  data() {
    return {
      initialValue: [],
      citiesData: [],
      inputValue: '',
      isCitiesListShow: false
    }
  },
  methods: {
    ...mapMutations(['tabBarShow', 'tabBarHide']),
    // ...mapActions('cities', ['getAllCity']),
    ...mapMutations('cities', ['GETACTIVECITY']),
    goBack() {
      this.$router.back()
    },
    async getAllCity() {
      const { data: res } = await allCity()
      this.initialValue = res.cities
      this.filterCities(res.cities)
    },

    filterCities(cities) {
      // 生成26个大写字母
      let letterArr = []
      let filterFinish = []
      for (let i = 65; i <= 90; i++) {
        letterArr.push(String.fromCharCode(i))
      }
      letterArr.forEach(item => {
        const classify = cities.filter(city => city.pinyin.substr(0, 1).toUpperCase() === item)
        //如果数组的长度等于0直接结束
        if (!classify.length) {
          return
        } else {
          filterFinish.push({
            index: item,
            list: classify
          })
        }
      })
      this.citiesData = filterFinish
    },
    getCityId(item) {
      this.GETACTIVECITY(item)
      this.$router.replace('/')
    },
    cancelShow() {
      this.isCitiesListShow = false
    },
    showIndex(index) {
      this.$toast({ message: index, className: 'toast1' })
    }
  },
  computed: {
    hotCities() {
      return this.initialValue.filter(item => item.isHot === 1)
    },
    indexList() {
      return this.citiesData.filter(item => item.list.length !== 0).map(item => item.index)
    },
    passMusterCities() {
      if (!this.inputValue) {
        return []
      } else {
        return this.initialValue.filter(item => {
          return item.pinyin.includes(this.inputValue.toLowerCase()) || item.name.includes(this.inputValue)
        })
      }
    }
  },
  // 监视inputValue的变化 只要值发生改变就展示列表
  watch: {
    inputValue(newValue) {
      if (newValue) {
        this.isCitiesListShow = true
      }
    }
  },
  created() {
    // this.getAllCity()
    this.tabBarHide()
    this.getAllCity()
  },

  beforeDestroy() {
    this.tabBarShow()
  }
}
</script>

<style lang="scss" scoped>
.input-header {
  background: #f4f4f4 !important;
}
::v-deep .radius-box {
  background: #fff !important;
  input {
    background: #fff !important;
  }
}
::v-deep .van-index-bar__index {
  padding: 2px 8px 2px 16px !important;
}

.scroll-content {
  height: calc(100vh - 0.93rem) !important;
  overflow: auto;
}
</style>